<!DOCTYPE html>
<html lang="zh" xmlns="http://www.w3.org/1999/html">

<head>
    <meta charset="UTF-8">
    <title>Liteyuki Status</title>
    <link rel="stylesheet" href="./css/card.css">
    <link rel="stylesheet" href="./css/fonts.css">
    <link rel="stylesheet" href="css/weather_now.css">
</head>
<!-- qw_icon: https://a.hecdn.net/img/common/icon/202106d/%d.png-->

<body>
    <template id="hourly-item-template">
        <div class="hourly-item">
            <img class="hourly-icon icon" src="./img/qw_icon/101.png" alt="WeatherIcon">
            <div class="hourly-temperature">90°</div>
            <!--        <div class="hourly-windDir">None</div>-->
            <div class="hourly-time">02:00</div>
        </div>
    </template>

    <template id="daily-item-template">
        <div class="daily-item">
            <div class="daily-day">
                周八
            </div>
            <div class="daily-weather">
                小水
            </div>
            <img class="daily-icon icon-day icon" src="./img/qw_icon/101.png" alt="WeatherIcon">
            <img class="daily-icon icon-night icon" src="./img/qw_icon/101.png" alt="WeatherIcon">
            <div class="daily-temperature">
                12°~23°
            </div>
        </div>
    </template>

    <template id="sub-info-template">
        <div class="sub-item">
            <img class="sub-svg" src="" alt="SVG" width="50" height="50">
            <div>示例信息</div>
        </div>

    </template>

    <div class="data-storage" id="data">{{ data | tojson }}</div>
    <div class="info-box" id="weather-info">
        <div id="detail-info">
            <div id="time">2045-01-12 22:22:22</div>
            <div id="adm">枫丹 白露 白露区</div>
            <div id="city">白露区</div>
        </div>
        <div id="main-info">
            <div id="main-left">
                <img class="main-icon icon" src="./img/qw_icon/101.png" alt="WeatherIcon">
            </div>
            <div id="main-right">
                <div id="temperature">
                    <div id="temperature-now">
                        90°
                    </div>
                    <div id="temperature-range">
                        10°~90°
                    </div>
                </div>
                <div id="description">
                    示例天气
                </div>
            </div>
        </div>
        <div id="aqi">
            <div id="aqi-dot"></div>
            <div id="aqi-data"> AQI 114 优</div>
        </div>
    </div>
    <div class="info-box" id="sub-info"></div>
    <div class="info-box" id="hours-info"></div>
    <div class="info-box" id="days-info"></div>

    <div class="ad-box" hidden><img id="ad" src=""></div>

    <script src="./js/card.js"></script>

    <div class="attribution-box">
        <div id="attribution-info"></div>
    </div>

    <script src="./js/weather_now.js"></script>

</body>